@input-prefix-cls: ~"@{css-prefix}input";
@input-padding-vertical-middle: 2px;
@input-font-size-large: 18px;

.@{input-prefix-cls} {
  .input;

  &-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;

    // #2149 & #2219
    line-height: normal;
  }

  &-icon {
    width: 32px; //和@input-height-base：32px大小保持一样
    height: @input-height-base;
    line-height: @input-height-base;
    font-size: @font-size-large;
    text-align: center;
    color: @color-text-level2;
    position: absolute;
    right: 0;
    z-index: 3;
  }

  &-hide-icon &-icon {
    display: none;
  }

  &-icon-validate {
    display: none;
  }

  &-icon-clear {
    display: none;
    color: @color-complementary-7;
    opacity :100%;
  }

  &-wrapper:hover {
    .@{input-prefix-cls}-icon-clear {
      display: inline-block;
    }
  }

  &-icon-normal+& {
    padding-right: 32px;
  }

  // #554
  &-hide-icon &-icon-normal+& {
    padding-right: @input-padding-horizontal;
  }

  &-wrapper-large &-icon {
    font-size: @input-font-size-large;
    height: @input-height-large;
    line-height: @input-height-large;
  }

  &-wrapper-small &-icon {
    width: 24px;
    font-size: @font-size-middle;
    height: @input-height-small;
    line-height: @input-height-small;

    //+ .@{input-prefix-cls} {
    //    padding-right: 24px;
    //}
  }

  // prefix & suffix
  &-prefix,
  &-suffix {
    width: 32px;
    height: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    i {
      font-size: @font-size-large;
      line-height: @input-height-base;
      color: @color-text-level2;
    }
  }

  &-suffix {
    left: auto;
    right: 0;
  }

  &-wrapper-small &-prefix,
  &-wrapper-small &-suffix {
    i {
      font-size: @font-size-middle;
      line-height: @input-height-small;
    }
  }

  &-wrapper-large &-prefix,
  &-wrapper-large &-suffix {
    i {
      font-size: @input-font-size-large;
      line-height: @input-height-large;
    }
  }

  &-with-prefix {
    padding-left: 32px;
  }

  &-with-suffix {
    padding-right: 32px;
  }

  // search
  &-search {
    cursor: pointer;
    padding: 0 16px !important;
    background: @color-brand-primary  !important;
    color: @color-bg-card  !important; //TODO:颜色待修改为default中的颜色
    border-color: @color-brand-primary  !important;
    transition: all @transition-time @ease-in-out;
    position: relative;
    z-index: 2;

    i {
      font-size: @font-size-large;
    }

    &:hover {
      background: tint(@color-brand-primary, 20%) !important;
      border-color: tint(@color-brand-primary, 20%) !important;
    }

    &:active {
      background: shade(@color-brand-primary, 5%) !important;
      border-color: shade(@color-brand-primary, 5%) !important;
    }

    &-icon {
      cursor: pointer;
      transition: color @transition-time @ease-in-out;

      &:hover {
        color: inherit;
      }
    }

    &:before {
      content: '';
      display: block;
      width: 1px;
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: -1px;
      background: inherit;
    }
  }

  &-wrapper-small &-search {
    padding: 0 12px !important;

    i {
      font-size: @font-size-middle;
    }
  }

  &-wrapper-large &-search {
    padding: 0 20px !important;

    i {
      font-size: @input-font-size-large;
    }
  }

  &-with-search {
    &:hover {
      .@{input-prefix-cls} {
        border-color: tint(@color-brand-primary, 20%);
      }
    }
  }

  &-word-count {
    text-align: center;
    position: absolute;
    right: @input-padding-horizontal;
    top: 2px;
    bottom: 2px;
    padding-left: @input-padding-horizontal;
    background: @color-bg-card; //TODO:颜色已修改为default中的颜色
    z-index: 1;
    display: inline-flex;
    align-items: center;
    color: @color-text-level2;
    font-size: @font-size-base; //show-word-limit属性开启，默认是12px
  }

  &-wrapper-disabled &-word-count {
    background: @color-brand-disabled2;
  }

  &-type-textarea &-word-count {
    align-items: flex-end;
    top: auto;
  }
}

.@{input-prefix-cls}-group {
  .input-group(~"@{input-prefix-cls}");
}

.@{form-item-prefix-cls}-error{
    .@{input-prefix-cls}{
        .input-error;
        &-icon{
            color: @error-color;
        }
    }
    .@{input-prefix-cls}-group{
        .input-group-error;
    }
    .@{input-prefix-cls} {
        .@{input-prefix-cls} {
            .input;
            &-icon{
                color: @color-text-level2;
            }
        }
    }
}
.@{form-item-prefix-cls}-validating{
    .@{input-prefix-cls}{
        &-icon-validate{
            display: inline-block;
        }
        &-icon + .@{input-prefix-cls}{
            padding-right: 32px;
        }
    }
}